<template>
    <div v-cloak>
        <div class="van-swipe-box b-g-f">
            <van-swipe :autoplay="3000" indicator-color="#5ca1ee">
                <van-swipe-item v-for="(item,index) in slides" :key="index">
                    <router-link tag="img" :to="{name:'detail',params:{id:item.url}}" :src="item.image" alt="" srcset=""></router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="shopping-list b-g-f" v-if="indexOne.length> 0">
            <div class="shopping-list-title">
                <img src="../../static/img/title1.png" alt="">
            </div>
            <ul class="shopping-list-box clearfix">
                <router-link :to="{name:'detail',params:{id:item.id}}" v-for="(item,index) in indexOne" :key="index" tag="li" class="clearfix">
                    <img :src="item.photo_s" alt="">
                    <div class="nf-title-box">
                        <span class="title">{{item.name}}</span>
                        <div class="money-gwc">
                            <span class="money"><em class="money-em">￥</em>{{item.price}}</span>
                            <img src="../../static/img/gwc.png" alt="">
                        </div>
                    </div>
                </router-link>
            </ul>
        </div>
        <div class="shopping-list b-g-f" v-if="indexTwo.length> 0">
            <div class="shopping-list-title">
                <img src="../../static/img/title2.png" alt="">
            </div>
            <ul class="shopping-list-box clearfix">
                <router-link tag="li" class="clearfix" :to="{name:'detail',params:{id:item.id}}" v-for="(item,index) in indexTwo" :key="index">
                    <img :src="item.photo_s" alt="">
                    <div class="nf-title-box">
                        <span class="title">{{item.name}}</span>
                        <div class="money-gwc">
                            <span class="money"><em class="money-em">￥</em>{{item.price}}</span>
                            <img src="../../static/img/gwc.png" alt="">
                        </div>
                    </div>
                </router-link>
            </ul>
        </div>
        <div class="shopping-list b-g-f" v-if="indexThree.length> 0">
            <div class="shopping-list-title">
                <img src="../../static/img/title3.png" alt="">
            </div>
            <ul class="shopping-list-box clearfix">
                <router-link tag="li" :to="{name:'detail',params:{id:item.id}}" class="clearfix" v-for="(item,index) in indexThree" :key="index">
                    <img :src="item.photo_s" alt="">
                    <div class="nf-title-box">
                        <span class="title">{{item.name}}</span>
                        <div class="money-gwc">
                            <span class="money"><em class="money-em">￥</em>{{item.price}}</span>
                            <img src="../../static/img/gwc.png" alt="">
                        </div>
                    </div>
                </router-link>
            </ul>
        </div>
        <div class="la-di">拉到底了~</div>
        <tabber :tabberActive="tabberActive"></tabber>
    </div>
</template>
<script>
import tabber from './common/tabber'
export default {
    data(){
        return{
            slides:[],
            indexOne: [],
            indexTwo: [],
            indexThree: [],
            tabberActive:0,
        }     
    },
    components:{
        tabber
    },
    mounted(){
        this.slidesIndex()
        this.goodsCategory()
    },
    methods:{
        // 轮播
        slidesIndex(){
            this.$api.shopping.slidesIndex().then(resp=>{
                if(resp.code == 1){
                    this.slides = resp.data
                }
            })
        },
        // 商品分类
        goodsCategory(){
            this.$api.shopping.goodsCategory().then(resp=>{
                if(resp.code == 1){
                    for(let i in resp.data){
                        this.goodsIndex(i)
                    }
                }
            })
        },
        // 商品列表
        goodsIndex(index){
            this.$api.shopping.goodsIndex({page:1,category_id:index}).then(resp=>{
                if(resp.code == 1 && index == 1){
                    this.indexOne = resp.data
                }else if(resp.code == 1 && index == 2){
                    this.indexTwo = resp.data
                }else if(resp.code == 1 && index == 3){
                    this.indexThree = resp.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.shopping-list{
    margin-top: 20px;
    .shopping-list-title{
        text-align: center;
        border-bottom: #f5f5f5 solid 1px;
        height: 90px;
        line-height: 115px;
        overflow: hidden;
        img{
            width: 410px;
        }
    }
    .shopping-list-box{
        padding: 0 30px;
        li{
            padding: 20px 0;
            cursor: pointer;
            img{
                width: 245px;
                // height: 245px;
                float: left;
                border-radius: 10px;
            } 
            .nf-title-box{
                padding-bottom: 20px;
                margin-left: 295px;
                border-bottom: #f5f5f5 solid 3px;
                min-height: 245px;
                position: relative;
                overflow: hidden;
                .title{
                    padding-top: 20px;
                    display: inline-block;
                }
                .money-gwc{
                    position: absolute;
                    width: 100%;
                    bottom: 30px;
                    display: block;
                    color: #D90004;
                    font-size: 40px;
                    font-weight: bold;
                    .money{
                        float: left;
                        .money-em{
                            font-weight: 400;
                            font-size: 34px;
                        }
                    }
                    img{
                        width: 48px;
                        height: 48px;
                        float: right;
                    }
               }
            }
        }
    }   
}
.la-di{
    height: 260px;
    text-align: center;
    line-height: 100px;
    color: #999999;
    font-size: 32px;
}
</style>


